import React, { useState, useRef, memo } from 'react';
import { ActionType } from '@/components/ProTable';
import { Tabs } from 'antd';
import KeepAliveHoc from '@/components/KeepAliveHoc';
import styles from './index.less';
import NormalCard from './components/NormalCard';
import BlankCard from './components/BlankCard';
import LossCard from './components/LossCard';

const { TabPane } = Tabs;

//定义setTimeout返回类型
// type TimerHandle = ReturnType<typeof setTimeout>;

const cardTypeName = {
  CARD_STARUS_NEW: '空白卡',
  CARD_STARUS_USE: '正常卡',
  CARD_STARUS_FORBIDDEN: '挂失卡',
};

const Card = () => {
  const [activeTab, setActiveTab] = useState<string>('CARD_STARUS_USE');
  const normalActionRef = useRef<ActionType>();
  const lossActionRef = useRef<ActionType>();

  const tabsChange: (activeKey: string) => void = (activeKey: string) => {
    setActiveTab(activeKey);
  };
  return (
    <div className={styles['card-container']}>
      <div className={styles['tabs-wrap']}>
        <Tabs defaultActiveKey={activeTab} onChange={tabsChange}>
          <TabPane tab="空白卡" key="CARD_STARUS_NEW">
            <BlankCard activeTab={'CARD_STARUS_NEW'} normalActionRef={normalActionRef} />
          </TabPane>
          <TabPane tab="正常卡" key="CARD_STARUS_USE">
            <NormalCard
              activeTab={'CARD_STARUS_USE'}
              actionRef={normalActionRef}
              lossActionRef={lossActionRef}
            />
          </TabPane>
          <TabPane tab="挂失卡" key="CARD_STARUS_FORBIDDEN">
            <LossCard
              activeTab={'CARD_STARUS_FORBIDDEN'}
              actionRef={lossActionRef}
              normalActionRef={normalActionRef}
            />
          </TabPane>
        </Tabs>
        <span className={styles['title']}>{cardTypeName[activeTab]}</span>
      </div>
    </div>
  );
};

export default KeepAliveHoc(memo(Card));
